doctype html
html(lang="en")
  head
    title='Segment Annotator'
    meta(charset= "UTF-8")
    style.
      body { font: 14pt sans-serif; }
      p { font-size: 14pt; }
      li { font-size: 12pt; }
      .mainlist li { font-size: 14pt; }
      input { font-size: 20pt; }
  body
    h1 Instructions
    p We would like your help to train computers to identify objects in 3D rooms.
    if taskMode === 'fixup'
      p.
        We have collected labels for objects in 3D rooms from other users like you.
        But the labels are not always correct or complete.  For instance,
        multiple chairs may be labeled as a single chair or some parts of the rooms are unlabeled.
        We need help from you to fix the labels so they are correct!
      div.
        You will be shown a 3D room with a set of existing labels.  Please check each
        labeled object to ensure that
      ul(class='mainlist')
        li All parts of the room labeled with a color
          div.
             To label parts of the room,
             you will first type the name of an object you want to identify using a text panel on the right.
             Then you will left click and drag to paint all the parts corresponding to that object.
             For example, you can type 'table' and then left click and drag over the table to select all its parts.
             Any objects that are gray can be colored in like this.
        li Each label correspond to a single object
          div Use the painting interface to relabel objects
          div Ctrl-click on the labels to select multiple labels and right click to merge multiple labels
        li The label correctly identifies the object (e.g. is a table incorrectly labeled as a wall?)
          div Double click on the label to edit the label
    else
      p.
        We will ask you to identify objects in some 3D rooms.
        For example, if you see a living room, we want to know which part is a table, which part is one chair, which part is another chair etc.
      p.
        You will first type the name of an object you want to identify using a text panel on the right.
        Then you will left click and drag to paint all the parts corresponding to that object.
        For example, you can type 'table' and then left click and drag over the table to select all its parts.
        Any objects that are gray can be colored in like this.
        Objects that have wrong or incomplete colors can be fixed up to be more accurate, or have their color labels renamed.
    p.
      Be consistent and precise with labels. For example don't label something as just a 'seat', try to label it as a 'chair' or 'sofa'.
      Label different object instances in different colors (e.g. two chairs should be painted as two colors).
      An object instance should be (mostly) connected and compact, and if movable, typically moved as one object.
      Here are some more detailed guidelines (available during the task as well by clicking help):
    include segment-annotator-task-details.pug
    p.
      There is a percentage at the bottom left telling you how much of the room has been colored
      Please try to color in as close to 100% as you can.
      Remember to color parts like the ceiling, and back sides of walls as well.
    //  Objects that are already identified by other people will show up as a yellowish color so you don't need to worry about them.
    //p Below are example rooms after coloring in some objects.
    img(src="resources/images/label-panel.png" style="height: 350px;")
    img(src="resources/images/painting-interface.png" style="height: 350px;")
    p This is a prototype so feedback on the task is much appreciated (there will be comments at the end).
    p Short instructions, keyboard and mouse command help is available during the task by clicking the question mark at the top left.
    p.
      Click START to begin.
    form
      input(type="button", id="buttonStart", value="START",
            onclick=`self.location='segment-annotator?userId=${userId}&sessionId=${sessionId}&base_url=${baseUrl}'`)
